<template>
	<view class="contents" :class="mstatus?'guding':''">
		<view class="cage_title">
			<view :class="now>=courseList.length?'active':''" @click="clickAll" v-if="courseList.length!=0">
				全部
			</view>
			<view :class="now==i?'active':''" v-for="(item,i) in courseList" :key="i" @click="chooseTitle(item.id,i)">
				{{item.name}}
			</view>
		</view>

		<view class="projectlist" v-for="(item,index) in specialList" :key="index" v-if="courseList.length!=0">
			<view class="title">
				{{item.category.name}}
			</view>
			<view class="content">
				<view class="left" @click="gotoCourseDetail(item.id)">
					<image :src="item.image" mode="aspectFill" show-menu-by-longpress></image>
				</view>
				<view class="middle">
					<view class="vname">
						{{item.title}}
					</view>
					<view class="vprice">
						￥{{item.money}}
					</view>

				</view>
				<view class="right">
					<view class="button" @click="gotoPromote(item.id)">
						去推广
					</view>
				</view>
			</view>
		</view>
		<!-- 点击生成海报 -->
		<view class="posters" v-show="mstatus">
			<view class="top">
				<image :src="poster.poster_image" mode=""></image>
				<!-- <view class="title">
					<view class="t1">
						******助力企业发展
					</view>
					<view class="t2">
						知识付费系统安装教程
					</view>
					<view class="t3">
						完成教程,共十节
					</view>
				</view> -->

			</view>
			<view class="mid">
				<view class="two-dimensionalcode">
					<image :src="poster.sence_image" mode=""></image>
				</view>
				<view class="tips">
					<view class="">
						邀你加入知识付费
					</view>
					<view class="">
						点击保存或扫码进入
					</view>
				</view>
			</view>
			<view class="bot" @click.stop="saveCode">
				保存二维码
			</view>
			<view class="close">
				<image src="../../static/close.png" mode="" @click="closePoster"></image>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" v-show="mstatus" >
		</view>
		<view class="" v-if="courseList.length==0" style="text-align: center;">
			暂无数据
		</view>
	</view>
</template>

<script>
	import {
		plantGetCourseList,
		plantspecialList,
		plantspecialDetail,
		gotoPromotion //去推广
	} from '@/api/api.js';
	export default {

		data() {
			return {
				active: '',
				autoplay: true,
				interval: 3000,
				duration: 1000,
				courseList: [],
				specialList: [], //课程列表
				page: 1,
				limit: 10,
				total: 0,
				now: 9999,
				total:'',       //专题总条数
				mstatus: false, //模态框状态
				poster: {
					sence_iamge: '', //海报二维码
					poster_image: '' //海报背景图
				}
			}
		},
		onLoad() {
			this.plantGetCourseList()
			this.plantspecialList()
		},
		onReachBottom() {
			console.log(this.total)
			if (this.total == this.specialList.length) {
				uni.showToast({
					title:'没有更多数据了',
					icon:'error'
				})
				return
			}
			this.page = this.page + 1
			uni.showLoading({
				title: '加载中'
			});
			let time = setTimeout(() => {
				let data = `grade_id=${this.active}&search=${0}&page=${this.page}&limit=${this.limit}`;
				plantspecialList(data).then(res => {
					if (res.data.code == '200') {
						uni.hideLoading()
						this.specialList.push(...res.data.data)
						this.total = res.data.data.total
					} else {}
				})
				clearTimeout(time)
			}, 1500)
		},
		methods: {
			// 获取课程分类
			plantGetCourseList() {
				plantGetCourseList().then(res => {
					// console.log(res)
					if (res.data.code == '200') {
						this.courseList = res.data.data
						console.log(this.courseList)

					}
				})
			},
			// 专题/课程列表
			plantspecialList(id) {
				let data = `grade_id=${id}&search=&page=${1}&limit=${10}`;
				plantspecialList(data).then(res => {
					if (res.data.code == '200') {
						console.log(res)
						this.specialList = res.data.data.list
						this.total = res.data.data.total
						// console.log(this.total)
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000
						})
					}
				})
			},
			// 点击全部
			clickAll() {
				this.now = this.courseList.length
				this.plantspecialList()
			},
			// 选择主标题
			chooseTitle(id, i) {
				this.now = i
				this.active = id
				this.page = 1;
				this.plantspecialList(this.active)
			},
			gotoCourseDetail(id) {
				uni.navigateTo({
					url: '/page_plantcourse/couresdetail/couresdetail?id=' + id
				})
			},
			// 去推广
			gotoPromote(id) {
				let data = `special_id=${id}`
				gotoPromotion(data).then(res => {
					console.log(res)
					if (res.data.code == '200') {
						this.mstatus = true
						this.poster = res.data.data
					}
				})
				

			},
			// 关闭海报
			closePoster() {
				this.mstatus = false
			},
			// 保存二维码到本地
			saveCode() {
				let that = this
				uni.downloadFile({
					url: that.poster.sence_image,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									})

								},
								fail: function() {
									uni.showToast({
										title: '保存失败',
										duration: 2000
									})

								}
							})
						} else {
							uni.showToast({
								title: '保存失败',
								duration: 2000
							})
						}
					}
				})

			}





		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(247, 249, 252);
		position: relative;
		&.guding {
			 overflow: hidden;
			  position:fixed;
			  height: 100%;
			  width: 100%;
		}

		.cage_title {
			box-sizing: border-box;
			padding: 28rpx;
			background-color: #06B979;
			color: #fff;
			display: flex;
			flex-direction: row;

			>view {

				margin-bottom: 10rpx;
				margin-right: 56rpx;

				&.active {
					border-bottom: 6rpx solid #fff;
				}
			}
		}

		.projectlist {
			background-color: #fff;
			padding: 0 28rpx;
			margin-bottom: 20rpx;

			.title {
				padding: 28rpx 0;
				border-bottom: 2rpx solid rgb(247, 249, 252);
			}

			.content {
				display: flex;
				justify-content: space-between;
				padding: 28rpx 0;

				.left {
					width: 220rpx;
					height: 140rpx;
					flex-shrink: 0;
					margin-right: 28rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.middle {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;

					.vname {}

					.vprice {
						color: #ED742E;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
				}

				.right {
					width: 150rpx;
					display: flex;
					flex-direction: column-reverse;

					.button {
						color: #fff;
						text-align: center;
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 60rpx;
						background-color: #06B979;
					}
				}

			}

		}

		.posters {
			z-index: 999;
			position: fixed;
			top: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 660rpx;
			height: 900rpx;
			background-color: rgba(0, 0, 0, 0.1);

			.top {
				width: 660rpx;
				height: 750rpx;
				position: relative;

				.title {
					text-align: center;
					position: absolute;
					left: 50%;
					top: 100rpx;
					transform: translateX(-50%);
					color: #fff;
					height: 600rpx;
					width: 100%;

					>view {
						margin: 50rpx auto;
					}

					.t1,
					.t3 {
						font-size: 56rpx;
					}

					.t2 {
						font: 80rpx;
					}

				}

				image {
					width: 660rpx;
					height: 750rpx;
				}
			}

			.mid {
				width: 660rpx;
				height: 250rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 20rpx 80rpx;
				display: flex;
				align-items: center;

				.two-dimensionalcode {
					width: 180rpx;
					height: 180rpx;
					margin-right: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.tips {
					height: 180rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 26rpx;

					:nth-last-child(1) {
						margin-bottom: 60rpx;
					}
				}
			}

			.bot {
				text-align: center;
				background-color: rgba(0, 0, 0, 0);
				margin: 48rpx auto 0;
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #fff;
				border: 1rpx solid #fff;
				border-radius: 60rpx;

			}

			.close {
				display: flex;
				justify-content: center;
				margin-top: 28rpx;

				image {
					width: 50rpx;
					height: 50rpx;
				}

			}
		}

		.mask {
			position: fixed;
			height: 100vh;
			width: 100vw;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.5);
			left: 0%;
			right: 0%;
			top: 0%;
			bottom: 0%;
			font-size: 26rpx;
			text-align: center;
			z-index: 10;
			// box-shadow: 2px -3px 100px -5px  #FFFFFF;

		}

	}
</style>
